<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header to="/securityActivity" :back="true" />
    <!-- 主体部分 -->
    <div class="bottomBox">
      <!-- 左侧 -->
      <div class="leftBox">
        <importantLeft />
      </div>
      <!-- 中间 -->
      <div class="centerBox">
        <headline :name="'党的二十大'" />
        <div class="botBox">
          <p class="botBox-box">
            <!-- 地图 -->
            <IndexMap></IndexMap>
          </p>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="rightBox">
        <div class="imgShowBox">
          <subheadings :name="titleName" />
          <div class="conBoxs">
            <ul class="ls-total">
            <li class="ls-total-item">
              <img class="ls-total-img" src="../../assets/images/anbao/place.jpg" alt="" />
              <span class="ls-total-title">应急避难场所</span>
            </li>
            <li class="ls-total-item">
              <img class="ls-total-img" src="../../assets/images/anbao/hospital.png" alt="" />
              <span class="ls-total-title">医院分布</span>
            </li>
            <li class="ls-total-item">
              <img class="ls-total-img" src="../../assets/images/anbao/school.png" alt="" />
              <span class="ls-total-title">学校分布</span>
            </li>
            <li class="ls-total-item">
              <img class="ls-total-img" src="../../assets/images/anbao/reserve.png" alt="" />
              <span class="ls-total-title">物资储备库分布</span>
            </li>
          </ul>
           <!-- <el-collapse v-model="activeNames" @change="handleChange(v)" v-for="(v,i) in titleList" :key="i">
            <el-collapse-item class="collapseItem" :title="v.name" :name="v.num">
               <ul class="ls-total">
            <li class="ls-total-item"  v-for="(item,index) in conList" :key="index">
              <img class="ls-total-img" :src="item.url" alt="" />
              <span class="ls-total-title">{{item.name }}</span>
            </li>
          </ul> 
            </el-collapse-item> 
          </el-collapse>  -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//地图
import IndexMap from '@/views/importantIndex/map/index.vue';
import { getZdcs, getLittleZdcs } from '@/api/securityActivity.js';
const titleList=ref([])
const conList=ref([])
const activeNames=ref(0)
const titleName=ref('重点目标')
getData()
function getData(){
  getZdcs({iaId:'123'}).then(res=>{
    console.log(res)
    titleList.value=res.data
  })
}
function handleChange(val){
  getLittleZdcs({zdcsId:val.id}).then(res=>{
    conList.value=res.data
    conList.value.map((item)=>{
      item.url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item.url)
    })

  })
}
</script>
<style scoped lang="scss">
.app-container {
  background-image: url('../../assets/images/common/common_title.png') !important;
  //   background-size: 100% 100%;
  .el-table .el-table__cell {
    padding: 0px 0 !important;
    height: 25px !important ;
    line-height: 25px !important;
  }
  .bottomBox {
    width: 100%;
    display: flex;
    padding: 0 30px;
    box-sizing: border-box;
    height: calc(100% - 90px);
    .leftBox {
      width: 450px;
      .imgShowBox {
        width: 450px;
        height: 460px;
        margin-bottom: 20px;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        &:nth-child(2) {
          height: 240px;
        }
        &:nth-child(3) {
          height: 200px;
        }
        .upBox {
          width: 100%;
          text-align: center;
          .upArrow {
            margin: -44px 0 54px 0px;
          }
        }
        .downBox {
          width: 100%;
          text-align: center;
          .downArrow {
            margin: -64px 0 54px 0px;
          }
        }
        .imgtop {
          color: white;
          font-size: 20px;
        }
        .conBox {
          width: 100%;
          display: flex;
          color: #e6f4fd;
          font-size: 18px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          flex-direction: column;
          justify-content: center;
          margin: -44px 0 54px 0px;
          padding: 0 18px;
          box-sizing: border-box;
          .el-table .el-table__header-wrapper th {
            background-color: none;
            color: #fff;
          }
          .el-table .el-table__cell {
            height: 15px !important;
          }
          &-textStyle {
            display: block;
            width: 424px;
            height: 14px;
            line-height: 24px;
            border-radius: 0px 0px 0px 0px;
            font {
              padding: 0 14px;
              border-bottom: 1px solid #475adb;
            }
          }
          .textStyle {
            width: 426px;
            display: flex;
            padding: 2px 10px;
            span {
              display: inline-block;
              width: 90px;
              height: 14px;
              font-size: 14px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              text-align: center;
              color: #e6f4fd;
              line-height: 34px;
            }
          }
        }
        
        .imgBox {
          height: 320px;
          margin: -54px 0 54px 20px;
          overflow-y: auto;
          &-item {
            padding-bottom: 20px;
            position: relative;
            height: 150px;
            margin-bottom: 10px;
          }
          &-img {
            width: 410px;
            height: 150px;
          }
          &-txt {
            position: absolute;
            bottom: -12px;
            left: 0px;
            width: 410px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #475adb;

            border-radius: 0px 0px 0px 0px;
            span {
              display: block;
              width: 112px;
              height: 16px;
              font-size: 16px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff !important;
              line-height: 16px;
            }
          }
        }
        .imgBox::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
        .pStyle {
          padding: 0 20px;
          margin-top: -20px;
          span {
            width: 411px;
            height: 58px;
            font-size: 18px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #46ffff;
            border-bottom: 1px solid #46ffff;
          }
        }
      }
    }
    .centerBox {
      flex: 1;
      .head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 501px;
          height: 71px;
        }
        p {
          position: absolute;
          left: 40%;
          bottom: 0%;
          width: 150px;
          height: 30px;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
          font-weight: normal;
          color: #46ffff;
          line-height: 46px;
        }
      }
      .botBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-box {
          width: 860px;
        }
        img {
          width: 860px;
          height: 640px;
        }
      }
    }
    .rightBox {
      width: 450px;
      padding: 10px 20px;
      .imgShowBox {
        width: 450px;
        height: 940px;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        .imgBox {
          padding-bottom: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &-img {
            display: block;
            width: 410px;
            height: 150px;
          }
          &-txt {
            width: 410px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #475adb;

            border-radius: 0px 0px 0px 0px;
            span {
              display: block;
              width: 112px;
              height: 16px;
              font-size: 16px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff !important;
              line-height: 16px;
            }
          }
        }
      }
    
      .ls-total {
        width: 430px;
        height: 860px;
        overflow-y: auto;
        margin-top: -20px;
        &-item {
          width: 400px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding-bottom: 20px;
          span {
            display: block;
          }
        }
        &-img {
          width: 100%;
          height: 400px;
          height: calc(100% - 20px);
        }
        &-title {
          width: 112px;
          height: 16px;
          font-size: 16px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
        }
      }
      .ls-total::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
  }
}
.conBoxs{
  margin: -20px 0 0 0;
}
.el-collapse{
  // margin: -20px 0 0 0;
  // --el-collapse-border-color:none!important;
  --el-collapse-content-bg-color:none!important;
}
.collapseItem ::v-deep .el-collapse-item__header{
    padding: 0 20px!important;
    // background-color:transparent;
    // color: #fff;
  }
</style>
